<template>
  <div class="app-container">
    <mainTilte title="添加商品" />
    <el-form ref="searchForm" :inline="true" :model="searchForm" label-width="110px">
      <div class="filters-wrap clearfix">
        <div class="filters-area">
          <el-col :xs="22" :sm="10" :md="10" :lg="6" :xl="5">
            <el-form-item label="">
              <el-select v-model.trim="searchParams.searchType" clearable :placeholder="placeholder">
                <el-option v-for="(item, index) of issignContractFilter" :key="index" :label="item.name" :value="item.code" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="22" :sm="10" :md="10" :lg="6" :xl="5">
            <el-form-item label="">
              <el-input v-model.trim="searchParams.searchName" clearable placeholder="关键字回车搜索" @keyup.enter.native="query" />
            </el-form-item>
          </el-col>
          <el-button type="primary" icon="el-icon-search" @click="query">搜索</el-button>
        </div>
      </div>
    </el-form>
    <egrid v-loading="loading" class="egrid" stripe fit border highlight-current-row element-loading-text="正在努力加载中..." :column-type="['selection']" :data="tableData" :columns="columns" :columns-schema="columnsSchema" :columns-handler="columnsHandler" @selection-change="checkChildIds" />
    <epagination v-if="tableData" :total="total" :current="searchParams.page" layout="total, prev, pager, next" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange" />
  </div>
</template>

<script>
import list from '@/layout/mixin/list'
import thund from '@/components/base/thund'
import dicValues from '@/components/dicTransform/index'
export default {
  mixins: [list],
  props: {
    // 接口额外参数
    otherParams: {
      type: Object,
      default() {
        return {}
      }
    },
    // 不筛选接口参数
    isProductShop: {
      type: Number,
      default: 1
    },
    // 不能搜索的参数
    issignContractCodes: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    const DICTIONARIES = {
      auditStatus: [
        // 商品所属客户类型 0-内部员工 1-客户商品
        {
          code: 0,
          name: '内部员工'
        },
        {
          code: 1,
          name: '客户商品'
        }
      ],
      // 运营类型：1-代营 2-自营
      cooperationStatus: [
        {
          code: 1,
          name: '代营'
        },
        {
          code: 2,
          name: '自营'
        }
      ],
      // 包装方式 ：1-普通商品 2-多箱包装
      splitOrder: [
        {
          code: 1,
          name: '普通商品'
        },
        {
          code: 2,
          name: '多箱包装'
        }
      ],
      statusList: [
        // 审核状态 0-待提交 1-待采购员审核 2-待运营审核 3-运营审核通过     -1 采购员审核驳回 -2 运营员审核驳回
        {
          code: 0,
          name: '待审核'
        },
        {
          code: 1,
          name: '审核通过'
        },
        {
          code: 2,
          name: '审核驳回'
        },
        {
          code: 3,
          name: '待编辑'
        },
        {
          code: 4,
          name: '待提交'
        }
      ],
      // 2-禁用 1-启用
      isAbleList: [
        {
          code: 2,
          name: '禁用'
        },
        {
          code: 1,
          name: '启用'
        }
      ]
    }
    return {
      title: '',
      loadingText: '',
      loading: false,
      searchForm: {},
      /** *
       * 定义搜索框
       */
      searchParams: {
        page: 1,
        limit: 10, // 默认是10
        totalRows: 0,
        searchType: '',
        searchName: ''
      },
      issignContract: [
        {
          name: '系统sku',
          code: 'code',
          placeholder: '编码'
        },
        {
          name: '名称',
          code: 'name',
          placeholder: '名称'
        },
        {
          name: '店铺',
          code: 'shop-name',
          placeholder: '店铺'
        }
      ],
      value: '',
      /** *
       * 定义显示的表格
       */
      columns: [
        {
          label: '缩略图',
          prop: 'image_url',
          width: '200',
          align: 'center',
          tooltip: false
        },
        {
          label: '系统sku',
          prop: 'code',
          width: '200',
          align: 'center',
          tooltip: false
        },
        {
          label: '中文名称',
          prop: 'name_ch',
          width: '100',
          align: 'center',
          tooltip: false
        },
        {
          label: '英文名称',
          prop: 'name_en',
          width: '150',
          align: 'center',
          tooltip: false
        },
        {
          label: '包装方式',
          prop: 'packing_method',
          width: '200',
          align: 'center',
          tooltip: false
        },
        {
          label: '商品分类',
          prop: 'category_text',
          width: '200',
          align: 'center',
          tooltip: false
        },
        {
          label: '运营类型',
          prop: 'operate_type',
          width: '100',
          align: 'center',
          tooltip: false
        },
        {
          label: '产品条码UPC',
          prop: 'bar_code_upc',
          width: '200',
          align: 'center',
          tooltip: false
        },
        {
          label: '产品条码',
          prop: 'bar_code',
          width: '200',
          align: 'center',
          tooltip: false
        },
        {
          label: '计量单位',
          prop: 'unit',
          width: '200',
          align: 'center',
          tooltip: false
        },
        {
          label: '所属供应商',
          prop: 'supplier_name',
          width: '200',
          align: 'center',
          tooltip: false
        },
        {
          label: '所属客户',
          prop: 'company_name',
          width: '200',
          align: 'center',
          tooltip: false
        },
        {
          label: '审核状态',
          prop: 'status',
          width: '200',
          align: 'center',
          tooltip: false
        },
        {
          label: '状态',
          prop: 'is_disable',
          width: '200',
          align: 'center',
          tooltip: false
        },
        {
          label: '创建人',
          prop: 'creator_name',
          width: '200',
          align: 'center',
          tooltip: false
        },
        {
          label: '创建时间',
          prop: 'created_at',
          width: '200',
          align: 'center',
          tooltip: false
        },
        {
          label: '修改人',
          prop: 'update_name',
          width: '200',
          align: 'center',
          tooltip: false
        },
        {
          label: '修改时间',
          prop: 'updated_at',
          width: '200',
          align: 'center',
          tooltip: false
        }
      ],
      /** *
       * 字典表组件
       */
      columnsSchema: {
        缩略图: {
          propsHandler({ col, row }) {
            return {
              img: row.image_url
            }
          },
          component: thund
        },
        运营类型: {
          propsHandler({ col, row }) {
            return {
              dictionaries: DICTIONARIES['cooperationStatus'],
              code: row[col.prop]
            }
          },
          component: dicValues
        },
        包装方式: {
          propsHandler({ col, row }) {
            return {
              dictionaries: DICTIONARIES['splitOrder'],
              code: row[col.prop]
            }
          },
          component: dicValues
        },
        审核状态: {
          propsHandler({ col, row }) {
            return {
              dictionaries: DICTIONARIES['statusList'],
              code: row[col.prop]
            }
          },
          component: dicValues
        },
        状态: {
          propsHandler({ col, row }) {
            return {
              dictionaries: DICTIONARIES['isAbleList'],
              code: row[col.prop]
            }
          },
          component: dicValues
        }
      }
    }
  },
  computed: {
    issignContractFilter({ issignContractCodes }) {
      const vm = this
      return vm.issignContract.filter(
        (e) => !issignContractCodes.includes(e.code)
      )
    },
    placeholder() {
      const vm = this
      const placeholderArr = vm.issignContractFilter.map(e => e.placeholder)
      return placeholderArr.join('或')
    }
  },
  created() {
    // 调用全局混合方法 第一个参数是请求地址对应的名称（api.js），第二个为参数
    const url = `/getProductList?page=${this.searchParams.page}&limit=${this.searchParams.limit}&${this.searchParams.searchType}=${this.searchParams.searchName}&is_disabled=1`
    this.getList(url)
  },
  methods: {
    // 自定义操作栏
    columnsHandler(cols) { },
    checkChildIds(val) {
      this.$emit('checkChildIds', val)
    },
    query() {
      let url = ''
      if (this.searchParams.searchType === 'name') {
        if (/[\u4E00-\u9FA5]/g.test(this.searchParams.searchName)) {
          url = `/getProductList?page=${this.searchParams.page}&limit=${this.searchParams.limit}&name_ch=${this.searchParams.searchName}&is_disabled=1`
        } else {
          url = `/getProductList?page=${this.searchParams.page}&limit=${this.searchParams.limit}&name_en=${this.searchParams.searchName}&is_disabled=1`
        }
      } else {
        url = `/getProductList?page=${this.searchParams.page}&limit=${this.searchParams.limit}&${this.searchParams.searchType}=${this.searchParams.searchName}&is_disabled=1`
      }
      this.getList(url)
    },
    handleSizeChange(val) { },
    handleCurrentChange(val) {
      this.searchParams.page = val
      this.query()
    },
    getList(url) {
      if (this.isProductShop === 1) {
        let allUrl = url
        if (this.otherParams) {
          for (const key in this.otherParams) {
            allUrl += `&${key}=${this.otherParams[key]}`
          }
        }
        this.initTableData(allUrl, '', (data) => {
          this.tableData = data.map(e => {
            e['category_text'] = `${e.parent_name}-${e.category_name}`
            return e
          })
        })
      } else {
        const url2 = `/products/getShopProductList/${this.otherParams['shop_id']}?page=${this.searchParams.page}&limit=${this.searchParams.limit}&${this.searchParams.searchType === 'name' ? 'name_ch' : this.searchParams.searchType}=${this.searchParams.searchName}`
        // if (this.otherParams) {
        //   for (const key in this.otherParams) {
        //     url2 += `&${key}=${this.otherParams[key]}`
        //   }
        // }
        this.initTableData(url2, '', (data) => {
          this.tableData = data.map(e => {
            e['category_text'] = `${e.parent_name} - ${e.category_name1}`
            return e
          })
        })
      }
    }
  }
}
</script>

<style>
</style>
